<template>
  <div class="time-report">
    <div class="title">Time Report</div>
    <div class="content time-report-content">
      <Form class="time-report-run-form" label-position="left" ref="formCustom" :model="runReportForm" :label-width="142">
        <div class="title">Please check the query period</div>

        <Form-item label="Report Dates">
          <Select v-model="reportTypeModel">
            <Option v-for="item in reportType"  :value="item.value" :key="item">{{ item.label }}</Option>
          </Select>
        </Form-item>

        <template v-if="reportTypeModel == 0">
          <Select class="week-select" v-model="weekDateSelectModel">
            <Option v-for="item in weekDateSelect"  :value="item.value" :key="item">{{ item.label }}</Option>
          </Select>
        </template>

        <template v-if="reportTypeModel == 1">
          <Form-item label="Begin Date">
            <Date-picker  type="date"placeholder="select" v-model="customBeginModel"></Date-picker>
          </Form-item>

          <Form-item label="End Date" >
            <Date-picker  type="date"  placeholder="select" v-model="customEndModel"></Date-picker>
          </Form-item>
        </template>
        <Button v-touch-ripple class="submit-button" type="primary" @click="runTimeReport">Run</Button>
      </Form>
    </div>
  </div>
</template>

<script>

export default {
  name: 'TimeReport',
  components:{

  },
  created(){
  	this.init();
  },
  computed:{
    initTimeReportData(){
      return this.$store.getters.timeReportPeriod
    }
  },
  watch:{
    initTimeReportData(value){
      if(!value && typeof value !='Object'){
          return;
      }
      this.reportType =[
        {
          label:'By week',
          value:0
        },
        {
          label:'Custom date range',
          value:1
        }
      ]
    	this.weekDateSelect = value['By week'].map(function (item,index) {
        return {
        	label: item.beginYear + '/' + item.beginDay + ' - ' + item.endYear + '/'  + item.endDay,
          value: item.beginYear + '/' + item.beginDay + ' - ' + item.endYear + '/'  + item.endDay,
        }
      });
      this.weekDateSelectModel = this.weekDateSelect[0].value;
    	var customItem = value['Custom date range'];
    	this.customBeginModel = customItem.beginYear + '/' + customItem.beginDay;
      this.customEndModel = customItem.endYear + '/' + customItem.endDay;
    },
    reportTypeModel(){

    }
  },
  data () {
    return {
      reportType:[],
      reportTypeModel:0,
      weekDateSelect:[],
      weekDateSelectModel : '',
      customBeginModel:'',
      customEndModel:'',
      runReportForm: {
        reportDates: '',
        beginDate: '',
        endDate: ''
      },
    }
  },
  methods:{
    init(){
      this.$store.dispatch('getTimeReportPeriod');
    },
    runTimeReport(){
    	var startDate,endDate;
      if(this.reportTypeModel == 0){
        startDate = moment(this.weekDateSelectModel.split("-")[0]).format('YYYY-MM-DD');
        endDate = moment(this.weekDateSelectModel.split("-")[1]).format('YYYY-MM-DD');
      }else if(this.reportTypeModel == 1){
        startDate = moment(this.customBeginModel).format('YYYY-MM-DD');
        endDate = moment(this.customEndModel).format('YYYY-MM-DD');
      }
      this.$router.push({ path: '/views/time/report/result', query: { startDate:startDate,endDate:endDate }})
    }
  }
}
</script>

<style rel="stylesheet/scss" type="text/css" lang="scss">
  .time-report-run-form {
    .ivu-form-item {
      .ivu-form-item-label {
        font-size: 16px;
        color: #325570;
        letter-spacing: 0;
      }
    }
  }
</style>
<style  rel="stylesheet/scss" type="text/css" lang="scss" scoped >
  @import "src/assets/css/variable";
  .time-report{
    box-sizing: border-box;
    .time-report-content{
      .time-report-run-form{
        position: relative;
        width: 288px;
        margin: 68px auto;
        .ivu-form-item{
          .ivu-form-item-label{
            font-size: 16px;
            color: #325570;
            letter-spacing: 0;
          }
        }
        >.title{
          height: 60px;
          font-size: 20px;
          color: #325570;
          line-height: 30px;
        }
        .week-select{
          margin-bottom: 68px;
        }
        .submit-button{
          width: 100%;
          height: 38px;
          background: #009AFF;
          border-radius: 4px;
          font-size: 16px;
          color: #FFFFFF;
          &:hover{
            opacity: .8;
          }
        }
      }
    }
  }
</style>
